<template>
  <gui-page class="gui-bg-white" ref="guiPage" :fullPage="true">
    <template v-slot:gBody>
      <view class="gui-bg-white gui-dark-bg-level-3">
        <view id="content-wrap3" style="padding: 0 15rpx">
          <view class="gui-color-gray">我的粉丝({{ fans.length }})</view>

          <gui-empty v-show="fans.length == 0" style="height: 600rpx">
            <template v-slot:img>
              <view class="gui-flex gui-rows gui-justify-content-center">
                <text
                  class="gui-icons gui-empty-icon gui-color-gray"
                  style="font-size: 80rpx"
                  >&#xe611;
                </text>
              </view>
            </template>
            <template v-slot:text>
              <text
                class="gui-block gui-text-center xhs-margin-top-30 gui-color-gray"
                >暂无消息，多发笔记可以收获粉丝~</text
              >
            </template>
          </gui-empty>

          <view
            v-for="(item, index) in fans"
            class="gui-list-items"
            style="padding-left: 30rpx"
          >
            <view class="gui-list-image gui-relative">
              <image
                @tap="goCard(item.authorId)"
                class="gui-list-image"
                style="width: 100rpx; height: 100rpx; border-radius: 100rpx"
                mode="aspectFill"
                :src="item.avatarUrl"
              ></image>
            </view>
            <view class="gui-list-body" style="padding-left: 10rpx">
              <view class="gui-list-title">
                <view class="gui-list-title-text gui-primary-text">{{
                  item.authorName
                }}</view>
                <view
                  class="gui-list-title-desc gui-bold gui-text-center"
                  style="padding-top: 20rpx"
                >
                  <view
                    v-show="item.isFollow && item.isFollowMe"
                    @tap="cancelfollowAuthor(item)"
                    class="gui-button-mini xhs-border-radius50 xhs-border-gray"
                    style="
                      width: 150rpx;
                      margin-right: 20rpx;
                      text-align: center;
                    "
                  >
                    <text class="gui-icons xhs-font24">互相关注</text>
                  </view>

                  <view
                    v-show="!item.isFollow && item.isFollowMe"
                    @tap="followAuthor(item)"
                    type="default"
                    class="gui-button-mini xhs-border-radius50 xhs-border-pink"
                    style="width: 150rpx; margin-right: 20rpx"
                  >
                    <text style="color: #e22e4d" class="gui-icons xhs-font24"
                      >回关</text
                    >
                  </view>

                  <view
                    v-show="!item.isFollow && !item.isFollowMe"
                    @tap="followAuthor(item)"
                    type="default"
                    class="gui-button-mini xhs-border-radius50 xhs-border-pink"
                    style="width: 150rpx; margin-right: 20rpx"
                  >
                    <text style="color: #e22e4d" class="gui-icons xhs-font24"
                      >关注</text
                    >
                  </view>

                  <view
                    v-show="item.isFollow && !item.isFollowMe"
                    @tap="cancelfollowAuthor(item)"
                    type="default"
                    class="gui-button-mini xhs-border-radius50 xhs-border-gray"
                    style="width: 150rpx; margin-right: 20rpx"
                  >
                    <text class="gui-icons xhs-font24">已关注</text>
                  </view>
                </view>
              </view>
              <text
                class="gui-list-body-desc gui-color-gray"
                style="margin-top: -20rpx"
                >{{ item.description }}</text
              >
            </view>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
import graceJS from "@/Grace6/js/grace.js";
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      tabs: [
        { id: 1, name: "互相关注" },
        { id: 2, name: "关注" },
        { id: 3, name: "粉丝" },
      ],
      authorId: "",
      friends: [],
      follows: [],
      fans: [],
      user: uni.app.getStorage("user"),
    };
  },
  onLoad(e) {
    this.getFollowMes();
    uni.app.post("/auth/readFollowMessage", "", "form", "", (res) => {});
  },
  onReachBottom: function () {
    console.log("asdasd");
  },
  mounted: function () {
    var mountedTimer = null;
    if (mountedTimer != null) {
      clearTimeout(mountedTimer);
    }
    mountedTimer = setTimeout(() => {
      // 01. 获取页面主体高度
      graceJS.getRefs("guiPage", this, 0, (ref) => {
        ref.getDomSize("guiPageBody", (e) => {
          this.swiperHeight = e.height - uni.upx2px(110); //导航栏高度
        });
      });
    }, 100);
  },
  methods: {
    goChat(author) {
      return uni.app.goChat(author);
    },
    goCard(authorId) {
      return uni.app.goCard(authorId);
    },
    cancelfollowAuthor(author) {
      uni.app.post(
        "/auth/cancelfollowAuthor",
        { authorId: author.authorId },
        "json",
        "",
        (res) => {
          this.getFollowMes();
        },
      );
    },
    followAuthor(author) {
      uni.app.post(
        "/auth/followAuthor",
        { authorId: author.authorId },
        "json",
        "",
        (res) => {
          this.getFollowMes();
        },
      );
    },
    getFollowMes() {
      let that = this;
      uni.app.get(
        "/auth/getFollowMes",
        { authorId: this.user.authorId },
        "",
        (res) => {
          console.log(res);
          this.fans = res.data;
        },
      );
    },
  },
};
</script>
<style scoped>
.search-fixed-top {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
}
</style>
